<template>
	<view :style="{ '--price': vuex_config.price }">
		<!-- 		<view class="reason">
			<view class="reson_top">
				<view class="reson_title">退款类型</view>
				<u-radio-group v-model="radioType">
					<view class="reson_select">
						<u-radio :name="1">
							无需退货
						</u-radio>
						<u-radio :name="2">
							退款退货
						</u-radio>
					</view>
				</u-radio-group>
			</view>
		</view> -->
		<view class="reason">
			<view class="reson_top" @click="goSelect">
				<view class="reson_title">退款原因</view>
				<view class="reson_select">
					<view :class="['tis', reason.label ? '' : 'text']">{{ reason.label ? reason.label : '请选择' }}</view>
					<view class="iconfont iconfont-e775"></view>
				</view>
			</view>
		</view>
		<view class="amount">
			<view class="amount_title">退款金额</view>
			<view class="amount_money">
				<view class="sig">￥{{dataForm.total_amount || ''}}</view>
			</view>
		</view>
		<template v-if="radioType == 2">
			<view class="amount">
				<view class="amount_title">*物流公司</view>
				<view class="amount_money">
					<input class="_input" type="text" v-model="expreForm.express" placeholder="请输入物流公司名称" />
				</view>
			</view>
			<view class="amount">
				<view class="amount_title">*物流单号</view>
				<view class="amount_money">
					<input class="_input" type="text" v-model="expreForm.express_no" placeholder="请输入物流单号" />
				</view>
			</view>
		</template>
		<view class="text-notice">
			{{judeg?'如有使用了优惠券，商品金额会减去商品所占优惠券的比例，最终退还实际退款金额' : '包含邮费￥'+dataForm.postage || 0.0}}
		</view>

		<view class="remark_box">
			<view class="remark_title">补充描述</view>
			<textarea maxlength="220" placeholder-style="color:#888" class="remark_text" placeholder="补充描述,有助于商家更好地处理问题"
				v-model="remark"></textarea>
		</view>
		<!-- v-if="!windowSmall" -->
		<view class="glo_bot_main">
			<view class="glo_bot_fix">
				<view @click="submit" class="glo_button" :style="{ background: vuex_config.themeColor1 }">提交</view>
			</view>
		</view>

		<u-select v-model="reasonVisible" mode="single-column" :list="resonList" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dataForm: {},
				radioType: 1, // 1:退款 2：退货
				refundDetail: {},
				refundAmount: 0,
				reason: {}, // 原因
				expreForm: {
					express: '',
					express_no: ''
				},
				reasonVisible: false,
				remark: '',
				judeg: false, //判断是否是单个商品退款
				resonList: [{
						value: 1,
						label: '产品与描述不符'
					},
					{
						value: 2,
						label: '购买的规格有误'
					},
					{
						value: 3,
						label: '产品质量有问题'
					},
					{
						label: '我不想买了',
						value: 4
					},
					{
						label: '卖家缺货',
						value: 5
					},
					{
						label: '信息填错，重新拍',
						value: 6
					},
					{
						label: '其他原因',
						value: 7
					}
				]
			};
		},

		onLoad(options) {
			if (options.id) {
				this.initPage(options);
			}
		},

		methods: {
			goSelect() {
				this.reasonVisible = true;
			},
			//初始化
			initPage(options) {
				this.judeg = false //重置
				this.$loading();
				this.$resPost('GetOrderDetailedInfo', {
					pk_id: options.id
				}).then(({
					data
				}) => {
					if (options.detailId) { //单个退款
						let radioType = 1
						this.dataForm = data.detailed.find(el => el.pk_id == options.detailId)
						data.detailed.forEach((item)=>{
							if(item.express_no){
								// 表示该订单以前是已发货状态的
								radioType = 2
							}
						})
						let productNum = data.detailed.length //全部商品数量
						this.refundAmount = this.dataForm.price * this.dataForm.num || 0
						this.dataForm.total_amount = this.dataForm.price * this.dataForm.num || 0 //单个商品总价格
						this.dataForm.order_id = data.pk_id //订单id 

						this.judeg = true
						this.radioType = radioType
					} else {
						this.refundAmount = data.total_amount || 0;
						this.dataForm = {
							...data
						}
						this.radioType = data.pay_status > 3 ? 2 : 1
					}
					// if(data.pay_status == 1){
					// 	this.expreForm.express = data.express_name || ''
					// 	this.expreForm.express_no = data.express_no || ''
					// }
					this.$hide();
				});
			},
			confirm(arr) {
				this.reason = arr[0];
			},
			submit() {
				let str = '';
				let reg = /^((0\.[0-9]{1,2})|(([1-9]+[0-9]*)(\.[0-9]{1,2})?))$/;
				if (!this.reason.value) {
					str = '请选择退款原因';
				} else if (this.radioType == 2) {
					if (!this.expreForm.express || !this.expreForm.express_no) {
						str = '请输入物流信息';
					}
				}
				if (str) {
					this.$toast({
						title: str
					});
					return;
				}

				let params = {
					order_id: this.judeg ? this.dataForm.order_id : this.dataForm.pk_id,
					money: this.refundAmount,
					content: this.reason.label + (this.remark ? ';' + this.remark : ''),
					detailed_id: this.judeg ? this.dataForm.pk_id : undefined, //单个退款才需要
					...this.expreForm
				};
				this.$loading();
				this.$resPost('ApplyOrderRefund', params).then(() => {
					this.$toast({
						title: '申请成功',
						icon: 'success'
					});
					setTimeout(() => {
						this.uniBack();
					}, 1000);
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	// 原因
	.reason {
		margin-top: 2rpx;
		background: #fff;
		padding: 0 28rpx;

		.reson_top {
			padding: 26rpx 0 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&:active {
				background: #f5f5f5;
			}

			.reson_title {
				font-size: 30rpx;
				font-weight: 700;
			}

			.reson_select {
				display: flex;
				align-items: center;

				.tis {
					font-size: 26rpx;
				}

				.text.tis {
					color: #999999;
				}

				.iconfont {
					color: #999999;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	// 退款金額
	.amount {
		margin-top: 2rpx;
		background: #fff;
		height: 72rpx;
		display: flex;
		padding: 0 28rpx;
		align-items: center;

		.amount_title {
			font-size: 30rpx;
			font-weight: bold;
			line-height: 36rpx;
			margin-right: 26rpx;
		}

		.amount_money {
			flex: 1;
			overflow: hidden;
			display: flex;
			align-items: center;

			.sig {
				color: var(--price);
				font-size: 30rpx;
				font-weight: bold;
				line-height: 72rpx;
				height: 72rpx;
			}

			._input {
				flex: 1;
				overflow: hidden;
				text-align: right;
				color: var(--price);
				line-height: 72rpx;
				height: 72rpx;
			}
		}
	}

	.most {
		padding: 0 28rpx;
		margin-top: 10rpx;
		background: #f5f5f5;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 22rpx;
		color: #666666;
		font-weight: bold;
	}

	// 備註
	.remark_box {
		background: #fff;
		padding: 0 28rpx;

		.remark_title {
			font-size: 30rpx;
			padding: 16rpx 0;
			font-weight: bold;
		}

		.remark_text {
			width: 100%;
			background: #fafafa;
			padding: 16rpx 10rpx;
			font-size: 28rpx;
		}
	}

	.text-notice {
		padding: 10rpx 28rpx;
		margin: 20rpx 0;
		background-color: #fafafa;
		color: #999;
		font-size: 25rpx;
		color: var(--price);
		font-weight: 700;
	}
</style>
